<header>
    <hgroup>
        <h1>Catégorie {$categorie.name}</h1>
    </hgroup>
</header>

<ul>
    <li><strong>Relevé PDF :</strong> <a href="{$BASE_URL}reports/categorie/pdf/{$categorie._id}-{ $categorie.name|replace:' ':'-' }">Télécharger</a></li>
</ul>
<br />

<div id="contentChart" style="width: 100%; height: 400px; margin: 0 auto"></div>

{literal}
<script>
	var ChartData = {
        chart: {
            renderTo: 'contentChart',
            zoomType: 'xy'
        },
        title: {
            text: '{/literal}{$categorie.name}{literal}',
            style: {
                color: '#000000'
            }
        },
        subtitle: {
            text: ' Évolution des prix',
            style: {
                color: '#000000'
            }
        },
        xAxis: [{
            categories: [{/literal}
                    { foreach from=$prix item=elem }
                    "{$elem.produit}",
                    {/foreach}
                   {literal}
                  ]
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                formatter: function() {
                    return this.value +' €';
                },
                style: {
                    color: '#000000'
                }
            },
            title: {
                text: 'Prix constaté',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Prix moyen',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' €';
                },
                style: {
                    color: '#000000'
                }
            },
            opposite: true,
            linkedTo: 0
        }/*, { // median
            title: {
                text: 'Prix médian',
                style: {
                    color: '#FF0000'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' €';
                },
                style: {
                    color: '#FF0000'
                }
            },
            opposite: true,
            linkedTo: 0
        }*/
        ],
        tooltip: {
            formatter: function() {
                return ''+
                    this.x +': '+ this.y +
                    this.series.name == ' €'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Prix constaté',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [{/literal}
                    { foreach from=$prix item=elem }
                    {$elem.prix},
                    {/foreach}
                   {literal}
                  ]


        }, {
            name: 'Prix moyen',
            color: '#89A54E',
            type: 'spline',
            dashStyle: 'shortdot',
               data: [{/literal}
                       { foreach from=$prix item=elem }
                       {$elem.prix},
                       {/foreach}
                      {literal}
                     ]

        }, {
            name: 'Prix médian',
            color: '#FF0000',
            type: 'spline',
            dashStyle: 'shortdot',
               data: [{/literal}
                       { foreach from=$prix item=elem }
                       {$medianes},
                       {/foreach}
                      {literal}
                     ]

        }]
    };
</script>
{/literal}